<template>
    <div class="padding-top-xl padding-left-sm padding-right-sm" style="background-color: white">
        <div class="padding-bottom-xl solid-bottom" style="text-align: center;">
            <div class="text-lg" style="color: #4f4f4f">支付金额</div>
            <div class="text-bold text-sl text-price" style="color: #4cd964">{{order.total}}</div>
        </div>


        <div class="text-lg padding-bottom">
            <div class="flex margin margin-left-sm margin-right-sm">
                <text class="flex-sub" style="color: #646464">支付状态</text>
                <text class="flex-sub text-right" style="color: #4f4f4f" v-if="order.isDone===1">已支付</text>
                <text class="flex-sub text-right" style="color: #4f4f4f" v-else>未支付</text>
            </div>
            <div class="flex margin margin-left-sm margin-right-sm">
                <text class="flex-sub" style="color: #646464">交易时间</text>
                <text class="flex-sub text-right" style="color: #4f4f4f">{{getDateTime(order.createTime)}}</text>
            </div>
            <div class="flex margin margin-left-sm margin-right-sm">
                <text class="flex-sub" style="color: #646464">支付方式</text>
                <text class="flex-sub text-right" style="color: #4f4f4f">{{order.payment}}</text>
            </div>
            <div class="flex margin margin-left-sm margin-right-sm">
                <text class="flex-sub" style="color: #646464">活动优惠</text>
                <text class="flex-treble text-right" style="color: #4f4f4f">{{getAttach(order.attach)}}</text>
            </div>
            <div class="flex margin margin-left-sm margin-right-sm">
                <text class="flex-sub" style="color: #646464">交易单号</text>
                <text class="flex-sub text-right" style="color: #4f4f4f">{{order.orderId}}</text>
            </div>
            <div class="flex margin margin-left-sm margin-right-sm">
                <text class="flex-sub" style="color: #646464">收银人员</text>
                <text class="flex-sub text-right" style="color: #4f4f4f">{{order.cashier}}</text>
            </div>
            <div class="margin margin-left-sm margin-right-sm">
                <uni-collapse>
                    <uni-collapse-item titleBorder="none">
                        <template v-slot:title>
                            <text style="color: #646464">商品详情</text>
                        </template>
                        <div class="content padding-top">
                            <div class="flex" v-for="goods in order.detailObject" :key="goods.code">
                                <text class="flex-sub text-left padding-xs text-lg" style="color: #646464">
                                    {{goods.goodsName}}
                                </text>
                                <text class="flex-sub text-right padding-right-sm text-lg" style="color: #4f4f4f" >
                                    ✖ {{goods.num}}
                                </text>
                            </div>
                        </div>
                    </uni-collapse-item>
                </uni-collapse>
            </div>
        </div>

    </div>

    <div class="padding-lg margin-top text-xl" style="background-color: white;text-align: center" @click="backHome">
        返回首页
    </div>

</template>

<script>

export default {
    name: "OrderDetail",
    data(){
      return{
          order:{},
      }
    },
    onLoad:function (option) {
        uni.setNavigationBarTitle({
            title: '订单详情'
        });
        const eventChannel = this.getOpenerEventChannel();
        eventChannel.on("order",(order)=> {
            this.order=order
        })

    },
    methods:{
        getDateTime(old){
            const newDate=old.split("T")
            return newDate[0]+" "+newDate[1]
        },
        getAttach(old){
            if (old==="")
                return "无"
            else {
                const newAttach=old.replace(/\|/g," ")
                return newAttach.replace(/=/g,":")
            }
        },
        backHome(){
            uni.reLaunch({
                url:"/pages/home/index"
            })
        }
    }
}
</script>

<style scoped>

</style>